<template name="rock-shake">
	<view class="shake" :id="idStr">
		<image class="rockimg" src="/static/shake.png" mode="top"></image>
		<text class="title">{{titleText}}</text>
		<text class="notes">返回结果基于您摇一摇生成的随机数。如无法使用摇一摇，请在屏幕上随机点击{{run>1?run:1}}次来生成随机数。</text>
		<canvas canvas-id="touches" class="canvas" @tap="touch" @touchmove="touchMove"></canvas>
		<icon class="close" type="cancel" color="#666" size="32" @click="cancel"></icon>
	</view>
</template>

<script>
	// import html2canvas from 'html2canvas'
	import sys from '../common/sys.js'
	import {
		Wave
	} from '../common/visual-effect.js'

	let pointCanvasContext, pointCanvasWidth, pointCanvasHeight, water = []
	export default {
		name: 'rock-shake',
		data() {
			return {
				enable: true,
				titleText: this.title,
				createTime: Date.now(),
				notes: '',
				idStr: 'rock-shake-' + Date.now(),
				run: 6,
			};
		},
		props: {
			title: {
				type: String,
				default: '请摇一摇手机'
			}
		},
		created: function() {
			const self = this
			sys.addShakePhoneCallback(function() {
				if (self && self.enable) {
					self.enable = false
					self.$emit('onrock', Math.random())
				}
			})
		},
		beforeDestroy: function() {
			this.enable = false
		},
		mounted() {
			const self = this
			pointCanvasContext = uni.createCanvasContext('touches', this)
			uni.createSelectorQuery().in(this).select('.shake').boundingClientRect(data => {
				pointCanvasWidth = data.width
				pointCanvasHeight = data.height
				self.tick()
			}).exec()
			uni.onWindowResize((res) => {
				pointCanvasWidth = res.size.windowWidth
				pointCanvasHeight = res.size.windowHeight
			})
		},
		methods: {
			cancel() {
				water = []
				if (this.enable) {
					this.$emit('cancel')
				}
			},
			tick() {
				pointCanvasContext.fillStyle = 'rgba(0,0,0,0)'
				pointCanvasContext.fillRect(0, 0, pointCanvasWidth, pointCanvasHeight)
				const now = Date.now()
				const speed = 0.06
				const maxAge = 1000
				water.forEach(w => {
					let age = now - w.t
					let r = age * speed
					if(maxAge - age > 0){
						let opacity = (maxAge - age) / maxAge
						let width = opacity*10;
						pointCanvasContext.shadowColor = '#FFF';
						pointCanvasContext.shadowBlur = width;
						pointCanvasContext.beginPath();
						pointCanvasContext.strokeStyle = 'rgba(255,255,255,' + opacity + ')'
						pointCanvasContext.lineWidth = width
						pointCanvasContext.arc(w.x, w.y, r, 0, 2 * Math.PI)
						pointCanvasContext.stroke()
					}
				})
				pointCanvasContext.draw()
				requestAnimationFrame(this.tick)
			},
			touchMove: function(e) {
				e.preventDefault()
				if (water && e.changedTouches && e.changedTouches[0]) {
					// console.log(e.changedTouches[0].x, e.changedTouches[0].y)
					water.push(new Wave(e.changedTouches[0].x, e.changedTouches[0].y + 44))
					this.run--
					if (this.run == 0) {
						water = []
						this.$emit('onrock', Math.random())
					}
				}
			},
			touch: function(e) {
				e.preventDefault()
				if (water && e.changedTouches && e.changedTouches[0]) {
					// console.log(e.changedTouches[0].x, e.changedTouches[0].y)
					water.push(new Wave(e.changedTouches[0].clientX, e.changedTouches[0].clientY + 44))
					this.run--
					if (this.run == 0) {
						water = []
						this.$emit('onrock', Math.random())
					}
				}
			}
		}
	}
</script>

<style>
	.shake {
		position: fixed;
		top: 0;
		background-color: #2d3132;
		width: 100%;
		height: 100%;
		align-items: center;
		text-align: center;
		flex-direction: column;
		justify-content: space-around;
		display: flex;
		z-index: 200
	}

	.rockimg {
		padding-top: 50px;
	}

	.title {
		color: aliceblue;
		font-size: larger;
	}

	.notes {
		color: #aaa;
		font-size: small;
		width: 80vw;
		text-align: center;
	}

	.canvas {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
	}

	.close {
		position: fixed;
		top: 64px;
		right: 20px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
</style>
